<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-4">
    <div class="bg-white rounded-lg shadow-xl p-8 max-w-md w-full transform transition-all duration-500 hover:scale-[1.02]">
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">登录</h1>
        <p class="text-gray-600">请输入你的用户名和密码</p>
      </div>
      <form @submit.prevent="login">
        <div class="mb-4">
          <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">用户名</label>
          <input
            type="text"
            id="username"
            v-model="username"
            placeholder="输入用户名..."
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
            required
          >
        </div>
        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            placeholder="输入密码..."
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
            required
          >
        </div>
        <button
          type="submit"
          class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-center"
        >
          登录
        </button>
      </form>
      <div class="mt-4 text-center">
        <router-link to="/register" class="text-blue-600 hover:text-blue-700">还没有账户？注册</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../userStore';

const router = useRouter();
const userStore = useUserStore();
const username = ref('');
const password = ref('');

const login = async () => {
  if (!username.value || !password.value) {
    alert('请填写用户名和密码');
    return;
  }

  try {
    if (userStore.loginUser(username.value, password.value)) {
      router.push('/home');
    } else {
      alert('用户名或密码错误');
    }
  } catch (error) {
    console.error('登录出错:', error);
    alert('登录时出现错误，请稍后再试');
  }
};
</script>

<style scoped>
.router-link {
  text-decoration: none;
}
</style>